
.radio {
    margin: 0.5rem;
    display: inline-block;
    font-family: 微软雅黑, serif;
}
.radio input[type="radio"] {
    position: absolute;
    opacity: 0;

}

/*https://www.w3school.com.cn/css/css_selector_adjacent_sibling.asp*/
/*input  radio 之后相邻的 label 前面是一个圆的*/
.radio input[type="radio"] + .radio-label:before {
    content: '';
    background: #f4f4f4;
    border-radius: 100%;
    border: 1px solid #b4b4b4;
    display: inline-block;
    /*width: 1.4em;*/
    /*height: 1.4em;*/
    /*http://caibaojian.com/rem-vs-em.html*/

    width: 1em;
    height: 1em;
    position: relative;
    /*top: -0.2em;*/
    margin-right: 1em;
    vertical-align: top;
    cursor: pointer;
    text-align: center;
    -webkit-transition: all 250ms ease;
    transition: all 250ms ease;
}

.radio input[type="radio"] + .radio-label{
    font-size: 1em;
}
.radio input[type="radio"]:checked + .radio-label:before {
    /*background-color: #3197EE;*/
    /*border-color: rebeccapurple;*/
    background-color:rebeccapurple; ;
    box-shadow: inset 0 0 0 4px #f4f4f4;
}
.radio input[type="radio"]:focus + .radio-label:before {
    outline: none;
    /*border-color: #3197EE;*/
    border-color: rebeccapurple;
}
.radio input[type="radio"]:disabled + .radio-label:before {
    box-shadow: inset 0 0 0 4px #f4f4f4;
    border-color: #b4b4b4;
    background: #b4b4b4;
}
.radio input[type="radio"] + .radio-label:empty:before {
    margin-right: 0;
}

/*https://c.runoob.com/codedemo/3373*/